<template>
    <div>
        <el-button type="danger" v-my-permission:answer.abc="'delete'"  size="small" @click="patchDelete">批量删除</el-button>
        <el-button type="primary" v-my-permission:answer="'create'" size="small" @click="router.push('add')">新增</el-button>
        <el-table :data="userList" stripe style="width:100%;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="content" label="内容" />
            <el-table-column label="添加时间">
                <template #default="data">
                    {{ moment(new Date(data.row.addtime)).format("YYYY-MM-DD HH:mm:ss a") }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-popconfirm :title="`确认删除${scope.row.username}?`" @confirm="deleteUser(scope.row._id)">
                        <template #reference>
                            <el-button v-my-permission:answer="'delete'" link type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button link v-my-permission:answer="'modify'" type="primary" @click="router.push(`/manage/user/edit/${scope.row._id}`)" size="small">
                        修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total,  prev, pager, next,sizes, jumper" :total="page.total"
            @current-change="change" v-model:current-page="page.pagenum" v-model:page-size="page.pagesize"
            :page-sizes="[5, 10, 15, 20]" :small="true" :disabled="false" />
    </div>
</template>
<!-- <script>
export default{
async setup(){
    await http.get("/xxx")
}
}
</script> -->
<script>
    export default{
        directives:{//自定义局部指令. 只能在当前组件使用.
            "my-direct":{
                //选项
            }
        }
    }
</script>
<script setup>
import http from '@/utils/http'
import { reactive, ref, watchEffect} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment'
let router = useRouter();
let route = useRoute();
let routepagenum = parseInt(route.query.page) || 1;
let userList = ref([]);//手动解包 .value
let page = reactive({
pagesize: 5, //存储的是 每页显示条数 每页显示5条数据
total: 0,
pagenum: routepagenum //存储当前页码数 1 2 3 4
});
async function getUserList() {
let re = await http.get("/answer", { params: { size: page.pagesize, page: page.pagenum } });
userList.value = re.result; //可以重新赋值
page.total = re.total;
}
//在setup 语法糖里面 默认代码块里面如果有 异步代码，那么这个组件就默认是异步组件
// watch  和 watchEffect 有什么区别？？？除了懒侦听以外还有什么区别？？？
watchEffect(async () => {
getUserList();
// console.log(userList);
});
let change = pagenum => {
page.pagenum = pagenum;
// router.push('list?page=3');//编程式导航
//点击页数的时候 跳转路由并传参 query传值 地址栏传值 动态
router.push({ path: "list", query: { page: pagenum } });
}
let sizeChange = (e) => {
console.log("eve==>", e);
}
let checkUsers = ref([]);
let handleSelectionChange = (vals) => {
// console.log('选择的数据===>',vals);
checkUsers.value = vals.map(t => t._id);
// console.log(checkUsers.value);
}
let patchDelete = async () => {
//这里用批量传递数组用data传值 不用params传值
let re = await http.delete("/user?", { data: { ids: checkUsers.value } })
//    console.log("删除结果===>",re);
if (re.deletedCount > 0) {
    ElMessage({
        type: "success",
        message: `删除了${re.deletedCount}条数据`
    });
    getUserList();
} else {
    ElMessage({
        type: "error",
        message: "删除失败!"
    })
}

}
</script>
<style lang="scss" scoped>
.v-enter-from {
transform: translateX(-100%);
}
.v-enter-to {
transform: translateX(0%);
}
.v-enter-active {
transition: all 0.5s linear;
}
</style>